<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name='format-detection' content='telephone=no' />
<title>人车人</title><link rel="icon" href="/assets/img/titleico.ico" type="image/x-icon">
<link rel="stylesheet" href="/assets/css/common.css" />
<link rel="stylesheet" href="/assets/css/iconfont/iconfont.css" />
<script src="/assets/js/jquery-3.1.1.min.js"></script>
<style>
.sectrans .container .box {
	background-color: #fff;
}

.sectrans .container .msg dl dt {
	padding: .4rem 2rem;
	background-color: #eaeaea;
}

.sectrans .container .msg dl dd {
	padding: 1rem 2rem;
}

.sectrans .container .link {
	margin: 5% 0;
}

.sectrans .container .link .list li {
	padding: 1.5rem 5%;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	font-size: 1.4rem;
	-webkit-align-items: center;
	align-items: center;
	position: relative;
}

.sectrans .container .link .list li a {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.sectrans .container .link .list li span {
	text-indent: 1rem;
}

.sectrans .container .link .list li i {
	font-size: 2rem;
}

.sectrans .container .link .list li i.stateicon,.sectrans .container .link .list li span.statetip
	{
	-webkit-flex: 2;
	-webkit-box-flex: 2;
	flex: 2;
	display: none;
	color: #a7a7a7;
	text-indent: 0;
}

.fliebox ul li .title {
	padding: 2% 5%;
	width: 90%;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: space-between;
	justify-content: space-between;
}

.fliebox ul li .upbox {
	-webkit-align-items: center;
	align-items: center;
	-webkit-flex-flow: column;
	flex-flow: column;
	text-align: center;
}

.fliebox ul li .upbox .uplabel {
	position: relative;
	padding: 2%;
	width: 40%;
	border: 1px dashed #007aff;
	overflow: hidden;
	height: 10rem;
}

.fliebox ul li .upbox .uplabel .showimg {
	position: absolute;
	width: 96%;
	height: 96%;
	top: 2%;
	left: 2%;
	background-color: #fff;
	display: none;
}

.fliebox ul li .upbox .uplabel .showimg img {
	-webkit-filter: blur(3px);
	filter: blur(3px);
	position: relative;
	top: 0;
	left: 0;
}

.fliebox ul li .upbox .uplabel .hide {
	display: none;
}

.fliebox ul li .upbox .uplabel .loadingbox {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 3;
	align-items: center;
	justify-content: center;
	top: 0;
	left: 0;
	background-color: #fff;
}

#uploadpage .container .fliebox ul li .upbox .uplabel .loadingbox span {
	color: #333;
	font-size: 1rem;
}

.fliebox ul li .upbox .uplabel .loadingbox .loading {
	width: 3rem;
	height: 3rem;
	border-top: .4rem solid rgba(0, 0, 0, 0.2);
	border-right: .4rem solid rgba(0, 0, 0, 0.2);
	border-bottom: .4rem solid rgba(0, 0, 0, 0.2);
	border-left: .4rem solid #ffffff;
	border-radius: 50%;
	position: absolute;
	left: 50%;
	top: 50%;
	margin: -1.9rem 0 0 -1.9rem;
}

.fliebox ul li .upbox .uplabel i {
	font-size: 6.6rem;
}

.fliebox ul li .upbox .uplabel .up {
	padding-bottom: .8rem;
}

.fliebox ul li .upbox .uplabel input {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	opacity: 0;
	z-index: 2;
}

.fliebox ul li .imagename {
	padding: .6rem;
	line-height: 1.8rem;
	text-align: center;
}

.fliebox ul li .imagename span {
	color: #606060;
	font-size: 1.6rem;
}

.fliebox ul li .imagename a {
	display: none;
	padding: .4rem 1rem;
}

.fliebox ul li .imagename a i {
	vertical-align: middle;
	color: #fd0421;
}

.fliebox ul li .upbox .uplabel .animation {
	-webkit-animation: loading 1s infinite linear;
	animation: loading 1s infinite linear;
}

.fliebox ul li .upbox .uplabel i.success {
	color: #5cb85c;
	display: none;
}

#uploadpage .container .fliebox ul li .upbox .uplabel i {
	font-size: 6.6rem;
}

#uploadpage .container .fliebox ul li .upbox .uplabel i.wait {
	color: #5cb85c;
}

.fliebox ul li .upbox .uplabel .up.wait {
	color: #5cb85c;
}

.fliebox p.title {
	padding: .4rem 2rem;
	background-color: #eaeaea;
}
</style>
</head>
<body>
	<!-- header start -->
	#@tabHead("业务办理",false)
	<!-- end header -->
	#@loadContainer()
	<div id="show-template" class="show-template trans">
		<div class="loading"></div>
		<img src="" />
	</div>
	<section class="visiblecon sectrans" id="uploadpage">
		<div class="container">
			<div class="msg box">
				<dl id="dlcon">
					<dt>订单详细</dt>
				</dl>
			</div>
			<div class="link box">
				<ul class="list" id="list">
					<li class="flexbox t_bor b_bor" style="display: none;"><a
						href="http://jinbeijin.com.cn/offlinepay?travelCode=20170100003"></a>
						<i class="iconfont">&#xe65d;</i> <span class="flex"
						style="font-size: 1.4rem;">金贝金</span> <span class='statetip'></span>
						<i class='iconfont stateicon'>&#xe618;</i> <i class="iconfont">&#xe61d;</i>
					</li>
					<li class="flexbox b_bor ac state"
						data-state="#(stepInfo.credPho??'')"><a
						href="/makeprice/uploadCred/2"></a> <i class="iconfont">&#xe67f;</i>
						<span class="flex" style="font-size: 1.4rem;">原件照片</span> <span
						class='statetip'></span> <i class='iconfont stateicon'>&#xe618;</i>
						<i class="iconfont">&#xe61d;</i></li>
					<li class="flexbox b_bor ac state"
						data-state="#(stepInfo.carPho??'')"><a
						href="/makeprice/uploadCred/3"></a> <i class="iconfont">&#xe61a;</i>
						<span class="flex" style="font-size: 1.4rem;">车辆照片</span> <span
						class='statetip'></span> <i class='iconfont stateicon'>&#xe618;</i>
						<i class="iconfont">&#xe61d;</i></li>
					<li class="flexbox b_bor ac state" id="bargain_state"
						data-state="#(stepInfo.bargainReview??'')"><a href="/bargain"></a>
						<i class="iconfont">&#xe608;</i> <span class="flex"
						style="font-size: 1.4rem;">合同申请</span> <span class='statetip'></span>
						<i class='iconfont stateicon'>&#xe618;</i> <i class="iconfont">&#xe61d;</i>
					</li>
					<li class="flexbox b_bor ac state"
						data-state="#(stepInfo.bargainPho??'')"><a
						href="/bargainUpload"></a> <i class="iconfont">&#xe64d;</i> <span
						class="flex" style="font-size: 1.4rem;">合同上传</span> <span
						class='statetip'></span> <i class='iconfont stateicon'>&#xe618;</i>
						<i class="iconfont">&#xe61d;</i></li>
					<li class="flexbox b_bor ac state"
						data-state="#(stepInfo.supply??'')"><a href="/supply/supply"></a>
						<i class="iconfont">&#xe648;</i> <span class="flex"
						style="font-size: 1.4rem;">资料补充</span> <span class='statetip'></span>
						<i class='iconfont stateicon'>&#xe618;</i> <i class="iconfont">&#xe61d;</i>
					</li>
					<li class="flexbox b_bor ac hide loan state"
						data-state="#(stepInfo.afterLoan??'')"><a href="javascript:;"></a>
						<i class="iconfont">&#xe610;</i> <span class="flex"
						style="font-size: 1.4rem;">贷后管理</span> <i
						class='iconfont stateicon'>&#xe618;</i> <i class="iconfont">&#xe61d;</i>
					</li>
					<li class="flexbox b_bor ac download"
						data-state="#(stepInfo.bargainReview??'')"><a
						href="/download/download"></a> <i class="iconfont">&#xe636;</i> <span
						class="flex" style="font-size: 1.4rem;">合同下载</span> <i
						class="iconfont">&#xe61d;</i>
					</li>
				</ul>
				<form id="fuioudqForm" method="post" hidden></form>
			</div>
		</div>
	</section>

	<!-- footer start -->
	#--#@footer(2)--#
	<!-- end footer -->

	<script src="/assets/js/fastclick.min.js"></script>
	<script src="/assets/js/xxsg.js"></script>
	<script src="/assets/js/axios.min.js"></script>
	<script>
    	$(function(){
    		var accept = "image/jpg, image/jpeg, image/png, image/gif"
   			if(_x.isAndroid()){
   				accept = "image/*"
   			}
    		
    		var dlcon = $("#dlcon"),
    			section = $("#uploadpage");
    			
    		//获取基本信息
    		function getJson(){
    			return axios.get("/makeprice/getJson/1")
    		}
    		
    		//获取需要上传的图片
    		function getUploadImga(){
    			return axios.get("/makeprice/getJson/4")
    		}
    		
    		//是否通过初审
    		var orderapply = $("#nav").data("orderapply");
    		if(orderapply == 3){//拒绝
    			var msg = $("#nav").data("msg"),
    				wirtDom = $("<div style='position: absolute;width: 100%;top: "+ ($("#uploadpage .container").outerHeight() + 30) +"px;left: 0;text-align: center;z-index: 99999;font-size: 1.6rem;'><i class='iconfont' style='color: #d9534f;position: absolute;top: -6rem;left: 42%;font-size: 5.6rem;'>&#xe602;</i>"+ msg +"</div>");
        		$("#list").parent().html(wirtDom);
        		getJson().then(function(res){
        			getBaseTab(res.data,showSuc);
        		})
        		return;
    		}else if(_x.isEmpty(orderapply) || orderapply == 2 || orderapply == 4){// || orderapply != 5
    			var wirtDom = $("<div style='position: absolute;width: 100%;top: "+ ($("#uploadpage .container").outerHeight() - 30) +"px;left: 0;text-align: center;z-index: 99999;font-size: 1.6rem;'>初审审核中，请耐心等待...</div>");
        		$("#list").parent().html(wirtDom);
        		getJson().then(function(res){
        			getBaseTab(res.data,showSuc);
        		})
        		return;
    		}else if(orderapply < 2){//需补充图片才能提交初审
    			$("#list").parent().remove();
    		
        		//获取图片
        		axios.all([getJson(),getUploadImga()])
        		.then(axios.spread(function(json,upload){
        			getBaseTab(json.data);
        			var fliebox = $("<div class='fliebox'><p class='title'>照片上传</p></div>"),
						fileListBox = $("<ul class='ulcon'></ul>"),
						subbtn = $("<a class='subbtn' id='submit'>提交</a>");
					fliebox.append(fileListBox).append(subbtn);
					$("#uploadpage .container .msg").after(fliebox);
    				fileBoxShow(upload.data,fileListBox,upLoadInit);
    				showSuc()
        		}))
       			return;
    		}else{
    			getJson().then(function(res){
        			getBaseTab(res.data,showSuc);
        		})
    		}
    		
    		//初始化照片上传方法
    		function upLoadInit(){
    			var bodyDom = document.body;//用于窗口滚动
    			section.on("change","input[type=file]",function(){
                	var that = $(this),
                    	files = that[0].files[0];
                    if(files){ 
                    	var dianIndex = files.name.indexOf("."),
	                		name = "";
		                //验证格式
		                if(dianIndex != -1){
		                	name = files.name.substring(dianIndex);
		                	if(!_x.isImage(name)){
		                        _x.showTip("请上传图片，格式为jpg/jpeg/png/gif");
		                        that.val("");
		                        return false;
		                    }
		                }
		                
                        //验证大小
                        if(files.size > 10485760){
                            _x.showTip("图片大小超出限制");
                            that.val("");
                            return false;
                        }
                        //显示名字和大小
                        that.parents(".upbox").siblings(".imagename").children("span").text(files.name + "（"+ _x.bytesTosize(files.size) +"）").siblings("a").css("display","inline-block");
                        that.parent().siblings(".loadingbox").removeClass("hide").children("div").addClass("animation"); 
                        
                        //return;
                        upload_file(files,that);
                    }
                });
    			
    			//上传
                function upload_file(file,fileDom){
                    var xhr = new XMLHttpRequest(),
                        formData = new FormData(),
                        liDom = fileDom.parents("li");
                    formData.append(fileDom.attr("name"),file);
                    xhr.open("post","/makeprice/submitCred/1",true);
                    xhr.addEventListener("load",function(){
                        var result = JSON.parse(this.response);
                        fileDom.parent().siblings(".loadingbox").addClass("hide").children("div").removeClass("animation");
                        console.log("success--->"+result)
                        liDom.data("submit",true);
                        liDom.find("div.icon").children(".fail").hide().siblings(".success").show().attr("imgsrc",result.src).removeClass("warning");
                        liDom.find("p.up").removeClass("warning").addClass("wait").text("上传成功");
                        liDom.find("p.up").siblings("i").addClass("wait").html("&#xe666;");
                        
                    });

                    xhr.upload.addEventListener('progress',function(e){//监听XMLHttpRequest对象的progress事件，读取完毕后触发
                        if(e.lengthComputable){//是否可以计算上传字节数
                            var percent = parseInt(e.loaded / e.total * 100);   
                            fileDom.parent().siblings(".loadingbox").children("span").text(percent + "%")
                        };
                    });
                    var imagenameDom = fileDom.parents(".upbox").siblings(".imagename");
                                 
                    /*imagenameDom.children(".abortbtn").click(function(){
                    	//终止上传
                    	xhr.abort();               	
                    	ajaxError(fileDom,reader,imagenameDom);
    	                liDom.data("submit",false).find("div.icon").children(".success").removeAttr("imgsrc").hide().siblings(".fail").show().css("opacity",1);
                    });*/
                    
                    xhr.addEventListener('error',function(e){//监听XMLHttpRequest对象的progress事件，读取完毕后触发
                    	ajaxError(fileDom,imagenameDom,"上传失败,请检查您的网络！");
                    	liDom.data("submit",false);
                    });
                    
                    xhr.send(formData);
                };
               
                //ajax错误处理 
                function ajaxError(fileDom,imagenameDom,tip){
               		_x.showTip(tip);
               		imagenameDom.children("span").text("").hide();
               		fileDom.parent().siblings(".loadingbox").addClass("hide").siblings(".showimg").hide().children("img").attr("src","");
                    fileDom.val("");
                };
                
                //显示上传的图片
             	var templateDom = $("#show-template"),
               		$win_Width = $(window).width(),
               		$win_Height = $(window).height(),
               		templateImg = null;
              	section.on("click","i.showimg",function(){
    	           	var src= $(this).attr("imgsrc");
    	           	if(_x.isEmpty(src))return;
    	           	templateDom.addClass("visible");
    	           	templateDom.children(".loading").addClass("animatie").show();
    	           	templateImg = new Image();
    	           	templateImg.src = src;
    	           	templateImg.onload = function(){
    	           		var imgW = this.width,
    	           			imgH = this.height,
    	           			data = _x.imgFormat(imgW,imgH,$win_Width,$win_Height);
    	           		templateDom.children("img").attr("src",src).css({
    	           			"width":data.imgWidth,
    	           			"height":data.imgHeight,
    	           			"margin-left": - data.imgWidth / 2,
    	           			"margin-top": - data.imgHeight / 2
    	           		}).addClass("show");
    	           	}
               });
              	
                //关闭
               	templateDom.on("click",function(e){
               		templateImg = null;
               		$(this).removeClass("visible");
               		$(this).children(".loading").removeClass("animatie").hide();
               	});
               	templateDom.on("transitionend",function(){
               		if(!$(this).hasClass("visible")){
               			$(this).children("img").attr("src","").removeClass("show");
               		}
              	})
               
               //总提交
               var isSubmit = true;
               section.on("click","#submit",function(){
            	   if(!isSubmit)return
            	   isSubmit = false;
            	   var that = $(this),
            	   	   mark = true,
            	   	   errorDom = null;
            	   section.children(".container").children(".fliebox").find("li").each(function(){
            		   if(!$(this).data("submit")){
            			   errorDom = $(this);
            			   mark = false;
            			   return false;
            		   }
            	   })
            	   if(mark){
            		   that.html("<div class='textloading'></div>")
            		   axios.get("/makeprice/submitOrderFinal")
            		   .then(function(res){
            			   if(res.data.code == "1"){
            				   _x.showTip(res.data.msg);
            				   section.find(".fliebox").remove();
            				   var html = "<div class='link box'>"+
            				   			  "	   <div style='position: absolute;width: 100%;top: "+ ($("#uploadpage .container").outerHeight() - 30) +"px;left: 0;text-align: center;z-index: 99999;font-size: 1.6rem;'>初审审核中，请耐心等待...</div>"+
            				   			  "<div>";
            				   section.append(html);
            			   }else{
            				   _x.showTip("提交失败！");
            				   that.html("提交")
            			   }
            			   isSubmit = true;
            		   })
    	           }else{
    	        	    isSubmit = true;
    	        	    that.html("提交")
    					var tip = "请上传" + errorDom.children(".title").children("span").text();
    					_x.showTip(tip);
    					_x.scrollAnimate(bodyDom.scrollTop,errorDom.offset().top,4,function(A){
    						bodyDom.scrollTop = A;
    					});
    	           	}
               })
    		}
    		
    		//渲染图片上传
    		function fileBoxShow(datas,ulDom,callback){
    			var html = "";
            	datas.forEach(function(data,index){
            		var sucIconStyle = "",
            			failIconStyle = "",
            			sucIconSrc = "",
            			submit = false,
            			err = "<i class='iconfont' style='font-size: 6.6rem;'>&#xe651;</i><p class='up'>点击上传</p>";
            		if(data.value){
            			err = "<i class='iconfont wait'>&#xe666;</i><p class='up wait'>上传成功</p>";
            			sucIconStyle = "style='display: inline;'";
            			failIconStyle = "style='display: none;'";
            			sucIconSrc = "imgsrc='"+ data.value +"'";
            			submit = true;
            		}
		            html = "<li style='padding: 1.2rem 0 0;' data-submit='"+ submit +"'>"+
						   "	<div class='title flexbox'>"+ 
						   "		<div class='icon' style='margin-right: 0;'>"+
						   "			<i class='iconfont fail' "+ failIconStyle +">&#xe701;</i>"+
						   "			<i class='iconfont success showimg' "+ sucIconStyle +" "+ sucIconSrc +">&#xe664;</i>"+
						   "		</div>"+
						   "		<span>"+ data.zhExpl +"</span>"+
						   "		<i class='iconfont look ac' style='opacity: 0;'>&#xe623;</i>"+
						   "	</div>"+
						   "	<div class='upbox flexbox'>"+
						   "		<div class='uplabel'>"+
						   "			<div class='showimg'>"+
						   "				<img src=''>"+
						   "			</div>"+
						   "			<div class='loadingbox flexbox hide'>"+
						   "				<span>0%</span>"+	
						   "				<div class='loading'></div>"+
						   "			</div>"+
						   				err+
						   "			<form enctype='multipart/form-data'>"+
						   "				<input name='"+ data.paramterName +"' type='file' accept='"+ accept +"' >"+
						   "			</form>"+
						   "		</div>"+
						   "	</div>"+
						   "	<p class='imagename'>"+
						   "		<span></span>"+
						   "	</p>"+
						   "</li>";
			        ulDom.append(html);
			        if(datas.length == ulDom.children("li").length){
			        	callback();
			        }
            	});
    		}
    		
    		$("#list li").each(function(){
    			var that = $(this),
					state = that.data("state");
    			if(that.hasClass("state")){
					if(state == "3"){//有反馈
						that.children(".stateicon").css("color","#f0ad4e").html("&#xe618;").show();
					}else if(state == "2"){//待审核
						that.children(".statetip").css({"font-size":"1.4rem","color":"#a7a7a7"}).html("待审核").show();
					}else if(state == "4"){//审核中
						that.children(".statetip").css({"font-size":"1.4rem","color":"#a7a7a7"}).html("审核中").show();
					}else if(state == "5"){//通过
						that.children(".stateicon").css("color","#5cb85c").html("&#xe641;").show();
					}
    			}
				 if(that.hasClass("hide")){
    				if(state == "0"){
    					that.hide()
    				}else{
	    				if(that.hasClass("loan")){
	    					that.children("a").attr("href","/afterLoan/afterLoan")
	    				}
    				}
    			}
				if(that.hasClass("download")){
    				if(state != "5"){
    					that.hide()
    				}
    			}
    		})
    		
    		function getBaseTab(data,callback){
    			var html = "",
    				isSn = false
    			for(var i = 0;i < data.length;i++){
    				if(data[i].value === "苏宁"){
    					if($("#bargain_state").data("state") == 5){
    						//$("#list").parent().append("<a class='subbtn' id='fuioudqSign' style='position: absolute;left: 50%;margin-left: -45%;' href='javascript:;'>代扣签约</a>")
    					}
    					isSn = true
    				}
    				html += "<dd class='b_bor'>"+ data[i].zhExpl +"："+ data[i].value + (data[i].unit?data[i].unit:"") +"</dd>";
    			}
    			dlcon.append(html);
    			if(isSn){
    				$("#list").children().eq(0).show()
    			}
    			if(callback && dlcon.children("dd").length == data.length){
    				callback();
    				if(_x.isEmpty(orderapply) || orderapply == 2 || orderapply == 4){
    					$("#uploadpage .link div").css("top",$("#uploadpage .container").outerHeight())
    				}else if(orderapply == 3){
    					$("#uploadpage .link div").css("top",$("#uploadpage .container").outerHeight() + 30)
    				}
    			}
    		}
    		
    		//数据渲染完毕做处理
        	function showSuc(){
        		section.removeClass("visiblecon");
    			$("#load-container").removeClass("load7");
        	}
    		
    		//富友签约
    		/*var fuioudqSign = true
    		section.on("click","#fuioudqSign",function(){
    			if(!fuioudqSign)return
    			fuioudqSign = false
    			var that = $(this),
    				formDom = $("#fuioudqForm")
    			that.html("<div class='textloading'></div>")
    			axios.post("/fuioudq/contract")
    			.then(function(res){
    				var data = res.data.data,
    					html = ""
    				for(var i = 0;i < data.length;i++){
    					html += "<input type='hidden' name='"+ data[i].name +"' value='"+ data[i].value +"' />"
    				}
    				formDom.attr("action",res.data.url).html(html).submit()
    			})
    			.catch(function(){
    				_x.showTip("网络超时，请稍后重试！")
    				that.html("代扣签约")
    				fuioudqSign = true
    			})
    		})*/
    	})
    	
    </script>


</body>
</html>
